<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <link type="text/css" rel="stylesheet" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/cart.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>
</head>

<body>
<!--导航部分  begin-->
<div th:replace="common/header::header"></div>
<!--导航部分 end-->

<!--最顶端轮播图片 begin-->
<div th:replace="common/carousel::carousel"></div>
<!--最顶端轮播图片 end-->
<!--最顶端轮播图片 end-->

<!--购物车 begin-->
<!--外层div-->
<div class="container">
    <!--左边-->
    <div class="col-md-8 col-sm-12">
        <!--左边-->
        <ol class="breadcrumb">
            <li>
                <a href="#" class="text-success"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的宝贝</a>
            </li>
        </ol>

        <!--购物车表格 begin-->
        <div class="table-responsive" id="imgDiv">
            <table class="table table-hover table-striped" style="vertical-align:middle;">
                <thead>
                <tr>
                    <td colspan="8">
                        <label class="text-primary">显示条数:</label>
                        <select id="cartSzie" class="form-control" style="display: inline" onchange="displaySize(this)">
                            <option value="2">2</option>
                            <option value="4">4</option>
                            <option value="6" selected>6</option>
                            <option value="8">8</option>
                        </select>
                    </td>
                </tr>
                <tr class="text-success success">
                    <th><input type="checkbox" id="selectAll" onclick="selectAll(this)"></th>
                    <th id="sequence">序号</th>
                    <th>图片</th>
                    <th>书名</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>合计</th>
                </tr>
                </thead>
                <tbody id="tby">
                <tr th:each="cartVo,iter:${cartVoList}">
                    <td><input type="checkbox" name="cks" th:value="${cartVo.getId()}"></td>
                    <td th:text="${cartVo.getBookId()}"></td>
                    <td><img th:src="@{'/images/'+${cartVo.getImgUrl()}}"></td>
                    <td th:text="${cartVo.getBookName()}"></td>
                    <td th:text="${cartVo.getNewPrice()}+'元'"></td>
                    <td>
                        <div class='input-group' style='width: 105px;'>
                            <span class='input-group-btn'>
                                <button class='btn btn-default' type='button'
                                        th:onclick="minus([[${cartVo.id}]],[[${cartVo.newPrice}]],[[${iter.index}]])">-</button>
                            </span>
                            <input type='text' th:id="${'cartCount' + iter.index}" class='form-control'
                                   th:value="${cartVo.count}"><span class='input-group-btn'>
                                <button class='btn btn-default' type='button'
                                        th:onclick="plus([[${cartVo.id}]],[[${cartVo.newPrice}]],[[${iter.index}]])">+</button>
                            </span>
                        </div>
                    </td>
                    <td th:id="${'cartPrice' + iter.index}" th:text="${cartVo.getNewPrice()*cartVo.getCount()}"></td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="5"></td>
                    <td class="text-success">总价:</td>
                    <td id="totalPrice" class="text-success" th:text="${session.cartInfo.getTotalPrice()}+'元'"></td>
                </tr>
                <tr style="background-color: white;">
                    <td>
                        <a th:href="@{/book/index}" class="btn btn-info">&lt;&lt;继续购买</a>
                    </td>
                    <td>
                        <button class="btn btn-danger" data-toggle="modal" data-target="#myModal" onclick="del()">删除商品
                        </button>
                    </td>
                    <td colspan="4"></td>
                    <td>
                        <a href="javascript:void(0)" th:onclick="confimOrder()" class="btn btn-warning">结算商品</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
        <!--购物车 end-->

        <!--删除提示模态框 begin-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <!--如果没有选中任何一个商品的时候,出现-->
            <div id="first_del" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title text-warning">抱歉!请您先选择商品!</h4>
                        </div>
                        <div class="modal-body">请选进行勾选!再执行删除删除!</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
            <!--first_del  end-->

            <!--如果没有选中了一个商品的时候,出现-->
            <div id="two_del" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title text-warning">删除商品,慎重操作!</h4>
                        </div>
                        <div class="modal-body">此操作一旦进行,数据将不可恢复!</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-danger" onclick="delRows(this)">确定删除</button>
                        </div>
                    </div>
                    <!-- /.modal-content -->
                </div>
            </div>
            <!--two_del  end-->
        </div>
        <!--删除提示模态框 end-->
    </div>

    <!--右边-->
    <div class="col-md-4 col-sm-3 col-xs-8">
        <ol class="breadcrumb ">
            <li>
                <a href="# " class="text-success "><span class="glyphicon glyphicon-shopping-cart "></span>我的购物车</a>
            </li>
            <li>
                <a href="javascript:void(0) " th:text="${session.cartInfo.getNum()}+'个商品'"></a>
            </li>
            <li>
                <a id="total" href="javascript:void(0)" th:text="${'总价'+session.cartInfo.getTotalPrice()+'元'}"></a>
            </li>
        </ol>

        <!--猜您喜欢-->
        <div>
            <span class="text-info"><span class="glyphicon glyphicon-heart"></span><span style="font-size: 20px; ">&nbsp;&nbsp;猜您喜欢</span></span>
            <div class="row" id="love">
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail">
                        <a th:href="@{/book/detail(bookId=4)}"><img th:src="@{/images/cikehuakai.jpg} "
                                                                    style="height: 200px; "
                                                                    alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>此刻花开</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=15)}"><img th:src="@{/images/taikong.jpg} "
                                                                     style="height: 200px; "
                                                                     alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>太空</h3>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-12 wow fadeInRight animated">
                    <div class="thumbnail ">
                        <a th:href="@{/book/detail(bookId=7)}"><img th:src="@{/images/lapulasidemonv.jpg}"
                                                                    style="height: 200px; "
                                                                    alt="通用的占位符缩略图 "></a>
                        <div class="caption ">
                            <h3>拉普拉斯的魔女</h3>
                        </div>
                    </div>
                </div>
                <div>
                    <ul class="pager ">
                        <li>
                            <a href="#" onclick="pageUp() ">&larr;上一页</a>
                            <a href="#" onclick="pageDown() ">下一页 &rarr;</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--喜欢end-->
    </div>
</div>



<!--首页底部信息 begin-->
<div th:replace="common/footer::footer"></div>
<!--end-->

<!--引入js文件-->
<script th:src="@{/dist/js/jquery.min.js}"></script>
<script th:src="@{/js/wow.js}"></script>
<script th:src="@{/js/carousel.js}" type="text/javascript"></script>
<script th:src="@{/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/login_register.js}"></script>
<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];
</script>
<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
        new WOW().init();
    }
    ;

    function minus(cartId, price, index) {
        var count = parseInt($("#cartCount" + index).val());
        var _price = parseFloat(price);
        if (count != 1) {
            $("#cartCount" + index).val(count - 1);
            $("#cartPrice" + index).html((count - 1) * _price);
            updateCart(cartId, count - 1);
        }
    }

    function plus(cartId, price, index) {
        var count = parseInt($("#cartCount" + index).val());
        var _price = parseFloat(price);
        $("#cartCount" + index).val(count + 1);
        $("#cartPrice" + index).html((count + 1) * _price);
        updateCart(cartId, count + 1);
    }

    //修改后台购物车记录
    function updateCart(cartId, count) {
        $.ajax({
            url: contextPath + "/cart/update",
            data: {"id": cartId, "count": count},
            method: "post",
            success: function (data) {
                $("#total").html('总价' + data + '元');
                $("#totalPrice").html(data);
            }
        })
    }

    //结算商品
    function confimOrder() {
        var ids = '';
        //判断是否选择了商品
        var count = 0;
        //获取所有的checkbox
        var cks = document.getElementsByName("cks");
        //遍历
        for (var i = 0; i < cks.length; i++) {
            if (cks[i].checked) {
                ids += cks[i].value + ',';
                count++;
            }
        }
        if (count == 0) {
            alert("请先选择图书~~")
        } else {
            window.location.href = contextPath + "/order/confirm?ids=" + ids.substring(0, ids.length - 1);
        }
    }
</script>
</body>

</html>